<template>
  <div id="app">
    <div id="box">
      <div class="head">新型冠状肺炎实时监测</div>
      <div class="time">当前时间：{{ nowDate }}</div>
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nowDate: "2022年12月2日-21时20分55秒星期五",   //默认值
    }
  },
  created() {
    // 清除定时器
    this.currentTime();
  },
  methods: {
    // 定时器函数
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    // 获取实时时间
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}年${month}月${day}日-${hour}时${minute}分${second}秒${weekArr[week]}`;
    }
  },
   mounted() {
  },
}
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  font-size: 10px;
}
#app {
  width: 100%;
  height: 430px;
  background-image: url("../public/image/bg.jpg");
  background-size: 100% 100%;
  z-index: -111;
  overflow: hidden;
}
.head {
  height: 40px;
  color: #9dbec1;
  text-align: center;
  line-height: 40px;
  background-image: url("../public/image/head_bg.png");
  background-size: 100% 100%;
  font-size: 14px;
}
.box {
  position: relative;
}
.time {
  position: absolute;
  top: 12px;
  right: 0;
  color: #9dbec1;
}
</style>
